/*
 * @Author: kanglang
 * @Date: 2021-03-06 14:24:33
 * @LastEditors: kanglang
 * @LastEditTime: 2021-03-06 15:36:06
 * @Description: 加油点item
 */
import React, { Fragment } from 'react';
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { DashLine } from '@/common';
import { px2dp, mainBgColorBlack } from '@/styles';
import { position } from '@/images';

const OilStationItem = (props) => {
  const { name = '', address = '', onPress, key, isHeader = true } = props;
  const handle = () => {
    onPress && onPress();
  };
  return (
    <Fragment key={key}>
      <TouchableOpacity
        style={[styles.container, isHeader && styles.borderLine]}
        onPress={handle}
      >
        <View style={styles.inner}>
          <Image
            style={styles.serviceStationImage}
            source={require('../../../../image/icons/oil_station_one.png')}
          />
          <View style={styles.serviceStationName}>
            <Text style={styles.stationName}>{name}</Text>
            {isHeader && <View style={styles.addressBox}>
              <Image
                style={styles.addressIcon}
                source={position}
              />
              <Text style={styles.address}>{address}</Text>
            </View>}
          </View>
        </View>
      </TouchableOpacity>
      {!isHeader && <DashLine />}
    </Fragment>
  );
};
export default OilStationItem;
const styles = StyleSheet.create({
  container: {
    paddingVertical: px2dp(20),
    marginHorizontal: px2dp(20)
  },
  inner: {
    flexDirection: 'row',
  },
  borderLine: {
    borderBottomWidth: px2dp(1),
    borderBottomColor: '#F0EFEF',
  },
  serviceStationImage: {
    width: px2dp(128),
    height: px2dp(128),
    marginRight: px2dp(10),
    borderRadius: px2dp(8)
  },
  serviceStationName: {
    flex: 1,
    height: px2dp(128),
    justifyContent: 'space-between',
  },
  stationName: {
    color: mainBgColorBlack,
    fontSize: px2dp(32),
  },
  addressBox: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: px2dp(20),
    flex: 1,
  },
  addressIcon: {
    width: px2dp(26),
    height: px2dp(24),
    marginRight: px2dp(5)
  },
  address: {
    color: '#999796',
    fontSize: px2dp(28),
    flex: 1,
  }
});
